@{
ViewData["Title"] = "购物车";
var SC = ViewBag.Data;
}
<div class="container-fluid">
  <div class="row">
    <div class="col-6 mt-auto">
      <h5 class="text-dark">购物车列表</h5>
    </div>
  </div>
  <div class="row mt-2">
    <table class="table table-bordered table-sm">
      <thead class="thead-light">
        <tr>
          <th scope="col"
              class="table-title text-center"
              style="width:40px;">
            <div class="form-check">
              <input class="form-check-input position-static"
                     type="checkbox"
                     id="check-all"
                     aria-label="...">
            </div>
          </th>
          <th scope="col"
              class="table-title"
              colspan="2">商品</th>
          <th scope="col"
              class="table-title"
              style="width:140px;">价格</th>
          <th scope="col"
              class="table-title"
              style="width:140px;">数量</th>
          <th scope="col"
              class="table-title"
              style="width:160px;">小计</th>
          <th scope="col"
              class="table-title"
              style="width:120px;">操作</th>
        </tr>
      </thead>
      <tbody>
        @foreach (var sc in SC) {
        <tr>
          <td class="text-center">
            <div class="form-check">
              <input class="form-check-input position-static"
                     type="checkbox"
                     name="check-item"
                     data-commodityid="@sc.Commodity.CommodityID"
                     data-price="@sc.Commodity.Price"
                     value="@sc.Commodity.CommodityID"
                     aria-label="...">
            </div>
          </td>
          <td class="p-1"
              style="width:160px;">
            <img src="\upload\@sc.Commodity.Photo"
                 class="img-fluid rounded" />
          </td>
          <td class="text-muted">
            <div class="col-12 border-bottom p-0 text-pname">
              @sc.Commodity.Cm_name
            </div>
            <div class="col-12 p-1">
              <p class="text-show-60">@sc.Commodity.introduce</p>
            </div>
          </td>
          <td class="text-muted">
            <div class="col-12 text-right text-pname">
              ￥@sc.Commodity.Price/@sc.Commodity.firm
            </div>

          </td>
          <td class="p-2 pt-3">
            <div class="input-group mb-3 input-group-sm">
              <div class="input-group-prepend">
                <button class="btn btn-dash btn-outline-secondary"
                        type="button">
                  <i class="bi bi-dash"></i></button>
              </div>
              <input type="text"
                     onkeyup="value=value.replace(/[^\d]/g,'')"
                     data-price="@sc.Commodity.Price"
                     class="form-control text-right"
                     value="1">
              <div class="input-group-append">
                <button class="btn btn-plus btn-outline-secondary"
                        type="button">
                  <i class="bi bi-plus"></i></button>
              </div>
            </div>
          </td>
          <td class="text-right text-muted p-2 pt-3">
            ￥<span class="item-amount">@sc.Commodity.Price</span></td>
          <td class="p-2 pt-3">
            <button class="btn btn-sm btn-warning btn-remove"
                    data-commodityid="@sc.Commodity.CommodityID">
              <i class="bi bi-cart-dash"></i>&nbsp;&nbsp;删除
            </button>
          </td>
        </tr>
        }
      </tbody>
      <tfoot>
        <tr>
          <td colspan="6"
              class="text-danger text-right"
              style="height: 50px; line-height: 50px;">
            <span>￥</span>
            <span id="amount">0.00</span>&nbsp;&nbsp;
          </td>
          <td class="text-center"
              style="height: 50px; line-height: 50px;">
            <button id="btn-amount"
                    class="btn btn-danger">
              <i class="bi bi-gem"></i>&nbsp;&nbsp;去结算
            </button>
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</div>
@section Scripts
{
<script>
  $(function () {
    //计算金额函数
    let computedMoney = function () {
      let amount = 0;
      $("input[name='check-item']:checked").each(function (index, elem) {
        let price = $(elem).data("price") * 1;
        //查找邻近的元素
        let number = $(elem).closest("tr").find("input.form-control").val() * 1;
        amount += number * price;
      })
      $("#amount").text(amount.toFixed(2)); //输出总金额并且保留两位小数
    }

    //删除按钮
    $(".btn-remove").on("click", function () {
      let btn = $(this);
      $.ajax({
        type: "delete",
        url: `/shopcart/info/${btn.data("commodityid")}`,
        data: {
          commodityid: btn.data("commodityid")
        },
        success: function (response) {
          alert(response.message);
          location.reload();
        }
      });
    })

    //数量文本框输入，单项商品金额
    $("input.form-control").on("change", function () {
      let o = $(this);
      if (o.val() * 1 < 1) {
        alert("最小不能小于1个");
        o.val(1);
      }
      if (o.val() * 1 > 200) {
        o.val(200);
        alert("最多不能超过200个");
      }
      //o.closest("tr").find(".item-amount").text((o.val() * o.data("price")).toFixed(2));
      //o.closest("tr").find("input[name='chxItem']:checkbox").change();
    });
    $("input.form-control").on("change", computedMoney); //输出商品个数的金额

    //减号按钮
    $(".btn-dash").on("click", () => {
      let o = $(event.currentTarget).closest('.input-group').find('input.form-control');
      o.val(o.val() * 1 - 1);
      o.change();
    })

    //加号按钮
    $(".btn-plus").on("click", () => {
      let o = $(event.currentTarget).closest('.input-group').find('input.form-control');
      o.val(o.val() * 1 + 1);
      o.change();
    })

    //多选框与单选
    $("#check-all").on("click", function () {
      let isChecked = $(this).is(":checked"); //判断是否选中，返回true 或 false
      $("input[name='check-item']").each(function (index, elem) {
        $(elem).prop("checked", isChecked); //改变属性 (attr attrbute 读取或设置html5标识的属性)(prop property 读取或设置dom对象的属性)
      })
      computedMoney();
    })

    $("input[name='check-item']").on("change", function () {
      let len1 = $("input[name='check-item']").length;
      let len2 = $("input[name='check-item']:checked").length;
      if (len1 == len2)
        $("#check-all").prop("checked", true);
      else
        $("#check-all").prop("checked", false);
      computedMoney();
    })

    $("#btn-amount").on("click", function () {
      if ($("input[name='check-item']:checked").length == 0)
      {
        alert("请先选择商品");
        return;
      }

      let data = [];
      $("input[name='check-item']:checked").each(function (index, elem) {
        data.push({
          commodityid: $(elem).data("commodityid"),
          price: $(elem).data("price"),
          sales: $(elem).closest("tr").find("input.form-control").val()
        })
      })
      $.ajax({
        type: "put",
        url: "/orders/info",
        data: {
          odvms: data
        },
        success: function (response) {
          alert(response.message);
          if (response.status == 0); //调往付款
        }
      });
    })
  });
</script>
}
